// src/SearchBar.tsx
import { useState, useEffect, FC } from "react";
import { Item } from "../file/type";
import Fuse from "fuse.js";

interface Props {
  list: Item[]; // 原始完整列表
  onResult: (result: Item[]) => void; // 把搜索结果回传父级
  resetFilter: () => void;
}

const SearchBar: FC<Props> = ({ list, onResult, resetFilter }) => {
  const [input, setInput] = useState("");
  /* Fuse 配置：可按需调阈值、权重等 */
  const fuse = useState(
    () =>
      new Fuse(list, {
        keys: ["name", "category"], // 允许在这两个字段里模糊搜
        threshold: 0.4, // 0=精确 1=极宽松
        shouldSort: true,
        includeScore: true,
      })
  )[0];

  /**
   * 当外部value改变时，同步更新内部input状态
   * 当 value 属性发生变化时（例如，当 FilterSortBar 中调用 setKeyword("") 时），
   * 它会同步更新 SearchBar 组件的内部 input 状态。这样就能确保搜索框的值在重置时正确更新。
   */
  //useEffect(() => {
  //  setInput(value);
  //}, [value]);

  /* 300 ms 防抖 */
  useEffect(() => {
    const timer = setTimeout(() => {
      if (!input.trim()) {
        onResult(list); // 空关键字 -> 返回全部
      } else {
        const res = fuse.search(input).map((r) => r.item);
        onResult(res);
        resetFilter(); //重置筛选
      }
    }, 300);
    return () => clearTimeout(timer);
  }, [input, list, fuse, onResult]);

  return (
    <input
      type="text"
      placeholder="Fuse.js 模糊搜索名称/类别"
      value={input}
      onChange={(e) => setInput(e.target.value)}
      style={{ width: 200, marginRight: 16 }}
    />
  );
};

export default SearchBar;
